<template>
  <div class="container">
    <div class="starlist" v-for="(star,index) in stars" :key="index" style="position: relative">
      <img :src="star.img"  :style="{'width':(2*width + 'rpx'),'height':(2*height + 'rpx')}">
      <div class="left" @click="scoreBtn(1,index)"></div>
      <div class="right" @click="scoreBtn(2,index)"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props:["imgs","width","height","starValue"],
    data(){
      return {
        stars:[]
      }
    },
    mounted(){
      this.stars = [
        {img:this.imgs[0]},
        {img:this.imgs[0]},
        {img:this.imgs[0]},
        {img:this.imgs[0]},
        {img:this.imgs[0]}
      ]
    },
    methods:{
      scoreBtn(type,index){
        let score = type === 1? (this.starValue /2):this.starValue;
        this.stars[index].img = type === 1? this.imgs[1]:this.imgs[2];
        this.stars.forEach((val,ind)=>{
          if(ind < index){
            score += this.starValue;
            val.img = this.imgs[2];
          }else if(ind > index) {
            val.img = this.imgs[0];
          }
        });
        this.$emit("ok",score)
      }
    },
    onUnload(){
      this.stars = [
        {img:this.imgs[0]},
        {img:this.imgs[0]},
        {img:this.imgs[0]},
        {img:this.imgs[0]},
        {img:this.imgs[0]}
      ]
    }
  }
</script>

<style scoped>
  .container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #fff;
  }
  .starlist{
    margin-left: 8px;
  }
  .right{
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 50%;
  }
  .left{
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
  }
</style>
